<template>
  <div>
    <van-nav-bar
      class="page-nav-bar"
      title="登录"
      left-text="返回"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="this.$router.push('/register')"
    />
    <div align="center" style="margin-top: 50px">
      <img width="90" height="90" src="../../assets/loginLogo.png" />
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-row>
          <van-col :span="2" offset="1">
            <van-icon name="manager" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              style="red;width:250px"
              name="姓名"
              placeholder="姓名"
              v-model="userName"
              clearable
              size="large"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
          </van-col>
        </van-row>

        <van-row>
          <van-col :span="2" offset="1">
            <van-icon name="lock" size="30px" />
          </van-col>
          <van-col :span="12">
            <van-field
              style="width:250px"
              type="password"
              name="密码"
              placeholder="密码"
              clearable
              v-model="password"
              :rules="[{ required: true, message: '请填写密码' }]"
              size="large"
            />
          </van-col>
        </van-row>
      </van-cell-group>
      <van-field
        name="checkbox"
        :rules="[{ required: true, message: '请勾选' }]"
      >
        <template #input>
          <van-checkbox v-model="checked" shape="round" icon-size="15px" />
          已阅读并同意
          <router-link to="/agreement1">服务条款</router-link>
          和
          <router-link to="/agreement2">隐私协议</router-link>
        </template>
      </van-field>
      <div style="margin: 16px; margin-top: 50px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <p align="center">
      <router-link to="/forgetpsd" style="font-size: 13px"
        >忘记密码</router-link
      >
    </p>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import { reactive, toRefs } from 'vue';
import { ref } from 'vue';
import { login } from '../../api';
import { useStore } from 'vuex';
import router from '../../router'
function userSubmit(user) {
  const store = useStore();
  const onSubmit = async () => {
    Toast.loading({
      message: '登录中...',
      forbidClick: true,
    });
    const res = await login(user);
    console.log(user);
    if (res.data.errCode == 0) {
      store.commit('setUser', res.data);
      localStorage.setItem('token', res.data.data);
      Toast.success('用户登录成功，请返回报名页！');
      console.log(window.localStorage.getItem('id'));
      router.push('/invitation?id='+window.localStorage.getItem('id'));
    } else {
      Dialog.alert({
        confirmButtonColor: '#3296fa',
        title: '登录失败',
        message:
          '姓名或密码错误，请您重新登录有任何疑问可以联系我们：李**，电话：136********',
      })
        .then(() => {
          // on confirm 再试一次
        })
        .catch(() => {
          // on cancel 退出
        });
    }
  };
  return {
    onSubmit,
  };
}
export default {
  methods:{
    onClickLeft(){
      this.$router.push('/invitation?id='+window.localStorage.getItem('id'));
    },
  },
  setup() {
    const user = reactive({
      userName: '',
      password: '',
    });
    const checked = ref(false);
    const groupChecked = ref([]);
    return {
      ...toRefs(user),
      ...userSubmit(user),
      checked,
      groupChecked,
    };
  },
};
</script>

<style>
a:visited {
  color: #3296fa;
}
.page-nav-bar {
  background-color: #3296fa;
}
.page-nav-bar .van-nav-bar__title,
.van-nav-bar__text {
  color: white;
}
.page-nav-bar .van-icon {
  color: #fff;
}
</style>
